<template>
	<view>
		<view class="tabBox">
			<view :class="{tabStyle:index==num}" @click="tabSwitch(index,item)" v-for="(item,index) in tasktabData" :key="index">
				<view class="tabcentent">
					<text class="tabcontent">{{item.tabcontent}}</text>
				</view>
			</view>
		</view>
		<view class="main">
			<view v-if="num==1" class="tipBigbox">
				请务必在用户提交后24小时内审核，逾期将自动通过
			</view>
			<view class="userDatabox" v-for="(item,index) in submitData" :key="index">
				<view class="userDatahead">
					<text class="usertitle">{{item.usertitle}}</text>
					<text class="submitStatus">{{item.submitStatus}}</text>
				</view>
				<view class="validationBox">
					<text class="wenzi">文字验证: <text class="textValidation">{{item.textValidation}}</text> </text>
					<image class="infoImg" :src="item.infoImg"></image>
				</view>
				<view v-if="num==0" class="screenshotCollection_box">
					<text class="screentip">截图收集:<text class="screenshotFont">{{item.screenshotFont}}</text></text>
				</view>
				<view v-if="num==1 || num==2 || num==3" class="jietubox">
					<view class="jietutop">
						<text class="screentip">截图收集:</text>
						<image class="screenshotImg" :src="item.screenshotImg"></image>
						<view v-if="num==1" class="adoptBox">
							<view class="adopt">
								通过
							</view>
							<view @click="open" class="fail">
								不通过
							</view>
						</view>
					</view>
					<view v-if="num==3" class="reason">
						<image class="gantanImg" src="../../../static/prodtct/gantanhao.png"></image>
						<text class="yuanyin">不通过原因: {{item.reasonfont}}</text>
						<view class="delete">删除</view>
					</view>
				</view>
				<view class="bottomBox">
					<image class="timeImg" src="../../../static/task/bianhao3.png"></image>
					<text class="year">审核时间: {{item.month}} {{item.time}}</text>
					<image class="numberImg" src="../../../static/dating/number.png"></image>
					<text class="number">提交编号:{{item.number}}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="failBox">
				<image class="failImg" src="../../../static/user2/fail.png"></image>
				<text class="faily">请您认真填写失败的原因，如用户多次反馈申诉并且成功，薪聚客将对您的账户进行冻结处理，余额将全数不退还！</text>
				<view class="reasonBox">
					<checkbox style="transform: scale(0.7);position: absolute;left: 10rpx;"></checkbox>
					<text class="reasonFonta">上传图片不符合要求</text>
				</view>
				<view class="reasonBox">
					<checkbox style="transform: scale(0.7);position: absolute;left: 10rpx;"></checkbox>
					<text class="reasonFonta">上传图片模糊不清</text>
				</view>
				<view class="reasonBox">
					<checkbox style="transform: scale(0.7);position: absolute;left: 10rpx;"></checkbox>
					<input class="inputReason" type="text" placeholder="请输入其他原因" />
				</view>
				<view @click="cancelClose" class="cancel">
					取消
				</view>
				<view @click="confiremClose" class="confirem">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				num: 0,
				tasktabData: [{
						tabcontent: '待提交'
					},
					{
						tabcontent: '待审核'
					},
					{
						tabcontent: '已通过'
					},
					{
						tabcontent: '未通过'
					}
				],
				submitData: [{
						usertitle: '用户数据',
						submitStatus: '已领取',
						textValidation: '待提交',
						infoImg: '../../../static/task/lianxi.png',
						screenshotFont: '待上传',
						screenshotImg: '../../../static/dating/public.png',
						reasonfont: '上传图片不符合要求',
						month: '2020-04-21',
						time: '13:20',
						number: '54654564514'
					},
					{
						usertitle: '用户数据',
						submitStatus: '已领取',
						textValidation: '待提交',
						infoImg: '../../../static/task/lianxi.png',
						screenshotFont: '待上传',
						screenshotImg: '../../../static/dating/public.png',
						reasonfont: '上传图片不符合要求',
						month: '2020-04-21',
						time: '13:20',
						number: '54654564514'
					},
					{
						usertitle: '用户数据',
						submitStatus: '已领取',
						textValidation: '待提交',
						infoImg: '../../../static/task/lianxi.png',
						screenshotFont: '待上传',
						screenshotImg: '../../../static/dating/public.png',
						reasonfont: '上传图片不符合要求',
						month: '2020-04-21',
						time: '13:20',
						number: '54654564514'
					},
					{
						usertitle: '用户数据',
						submitStatus: '已领取',
						textValidation: '待提交',
						infoImg: '../../../static/task/lianxi.png',
						screenshotFont: '待上传',
						screenshotImg: '../../../static/dating/public.png',
						reasonfont: '上传图片不符合要求',
						month: '2020-04-21',
						time: '13:20',
						number: '54654564514'
					}
				]
			};
		},
		methods: {
			tabSwitch(index, item) {
				var self = this
				this.num = index;
			},
			open() {
				this.$refs.popup.open()
			},
			cancelClose(){
				this.$refs.popup.close()
			},
			confiremClose(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.tabBox {
		width: 750rpx;
		height: 84rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 10rpx;
		display: flex;
		justify-content: space-around;
	}

	.tabStyle {
		width: 85rpx;
		height: 78rpx;
		border-bottom: 6rpx solid #7322D8;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(115, 34, 216, 1);
	}

	.tabcentent {
		width: 85rpx;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabcontent {
		font-size: 28rpx;
	}

	.main {
		width: 750rpx;
		// border: 1rpx solid red;
	}

	.tipBigbox {
		width: 750rpx;
		height: 85rpx;
		background: rgba(115, 34, 216, 0.1);
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(249, 88, 90, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.userDatabox {
		width: 710rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.userDatahead {
		width: 670rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #E5E5E5;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		position: relative;
	}

	.usertitle {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.submitStatus {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		right: 0rpx;
	}

	.validationBox {
		width: 670rpx;
		height: 50rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: flex-end;
	}

	.wenzi {
		font-size: 28rpx;
		color: #333333;
	}

	.textValidation {
		font-size: 28rpx;
		color: #8E8E8E;
		margin-left: 10rpx;
	}

	.infoImg {
		width: 42rpx;
		height: 37rpx;
		position: absolute;
		right: 10rpx;
	}

	.screenshotCollection_box {
		width: 670rpx;
		height: 70rpx;
		position: relative;
		left: 20rpx;
	}

	.screentip {
		font-size: 28rpx;
		color: #333333;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.screenshotFont {
		font-size: 28rpx;
		color: #8E8E8E;
		margin-left: 10rpx;
	}

	.jietubox {
		width: 670rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		left: 20rpx;
	}

	.jietutop {
		width: 670rpx;
		height: 230rpx;
		// border: 1rpx solid red;
		position: relative;
	}

	.screenshotImg {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 17rpx;
		left: 140rpx;
	}

	.adoptBox {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		right: 0rpx;
		bottom: 20rpx;
	}

	.adopt {
		width: 100rpx;
		height: 40rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 20rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fail {
		width: 100rpx;
		height: 40rpx;
		border: 2px solid rgba(51, 51, 51, 1);
		border-radius: 20rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
	}

	.reason {
		width: 670rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.gantanImg {
		width: 23rpx;
		height: 23rpx;
	}

	.yuanyin {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: relative;
		left: 10rpx;
	}

	.delete {
		width: 100rpx;
		height: 40rpx;
		border: 2rpx solid rgba(115, 34, 216, 1);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		right: 0rpx;
	}

	.bottomBox {
		width: 670rpx;
		height: 60rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.timeImg {
		width: 23rpx;
		height: 23rpx;
	}

	.year {
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		left: 34rpx;
	}

	.numberImg {
		width: 27rpx;
		height: 20rpx;
		position: absolute;
		left: 337rpx;
	}

	.number {
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		left: 375rpx;
	}

	.failBox {
		width: 650rpx;
		height: 756rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 30rpx;
	}

	.failImg {
		width: 428rpx;
		height: 40rpx;
		position: absolute;
		top: 40rpx;
		left: 120rpx;
	}

	.faily {
		display: block;
		width: 588rpx;
		height: 97rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		line-height: 36rpx;
		position: absolute;
		top: 112rpx;
		left: 31rpx;
	}

	.reasonBox {
		width: 610rpx;
		height: 90rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 14rpx 2rpx rgba(115, 34, 216, 0.1);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		position: relative;
		top: 236rpx;
		left: 20rpx;
		margin-top: 10rpx;
	}

	.reasonFonta {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 66rpx;
	}

	.inputReason {
		font-size: 28rpx;
		width: 500rpx;
		position: absolute;
		left: 66rpx;
	}
	.cancel{
		width:260rpx;
		height:90rpx;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.15);
		border-radius:20rpx;
		font-size:36rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
	}
	.confirem{
		width:260rpx;
		height:90rpx;
		background:rgba(115,34,216,1);
		box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
		border-radius:20rpx;
		font-size:36rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
	}
</style>
